<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI生成的翻译题</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <style>
        body {
            background-color: #f0f9f9;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        /* AI生成特定样式 */
        .ai-badge {
            background: linear-gradient(45deg, #40e0d0, #3bcdc0);
            color: white;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .target-vocab {
            background: rgba(64, 224, 208, 0.1);
            border-bottom: 2px solid #40e0d0;
            padding: 0 2px;
        }
        .vocab-list {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin: 15px;
        }
        .vocab-item {
            display: inline-block;
            background: white;
            padding: 4px 12px;
            border-radius: 15px;
            margin: 4px;
            font-size: 0.9rem;
            border: 1px solid #eee;
        }
        .translation-section {
            background: white;
            margin: 15px;
            border-radius: 15px;
            padding: 20px;
        }
        .english-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        .translation-input {
            border: none;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            width: 100%;
            min-height: 120px;
            resize: none;
            margin-top: 20px;
        }
        .translation-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(64, 224, 208, 0.2);
        }
        .regenerate-btn {
            background: #40e0d0;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .regenerate-btn:hover {
            background: #3bcdc0;
        }
        .bottom-tools {
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="ai-exercise.html" class="text-dark"><i class="bi bi-chevron-left fs-4"></i></a>
        <h5 class="mb-0 mx-auto">AI生成的翻译题</h5>
        <span class="ai-badge">
            <i class="bi bi-robot"></i> AI生成
        </span>
    </div>

    <!-- 目标词汇展示 -->
    <div class="vocab-list">
        <div class="mb-2">使用的目标词汇：</div>
        <span class="vocab-item">deteriorate</span>
        <span class="vocab-item">resilient</span>
        <span class="vocab-item">sustainable</span>
    </div>

    <!-- 翻译内容 -->
    <div class="translation-section">
        <div class="english-text">
            The <span class="target-vocab">sustainable</span> development of modern cities depends on their ability to remain <span class="target-vocab">resilient</span> in the face of challenges. Without proper maintenance, urban infrastructure will gradually <span class="target-vocab">deteriorate</span>, affecting the quality of life for residents.
        </div>
        <div class="form-label">你的翻译：</div>
        <textarea class="translation-input" placeholder="请输入你的翻译..."></textarea>
    </div>

    <!-- 底部工具栏 -->
    <div class="bottom-tools position-fixed bottom-0 w-100 bg-white p-3">
        <div class="d-flex justify-content-between align-items-center">
            <button class="regenerate-btn">
                <i class="bi bi-arrow-clockwise"></i>
                重新生成
            </button>
            <button class="btn btn-primary">查看参考译文</button>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 重新生成按钮点击事件
            $('.regenerate-btn').click(function() {
                $(this).html('<i class="bi bi-arrow-clockwise"></i> 生成中...');
                $(this).prop('disabled', true);
                
                setTimeout(() => {
                    location.reload();
                }, 1500);
            });

            // 查看参考译文按钮点击事件
            $('.btn-primary').click(function() {
                window.location.href = 'ai-translation-analysis.html';
            });
        });
    </script>
</body>
</html>